<template>
  <div>
    <section v-for="block in marketing" :key="block.title">
      <h3 class="hui-marketing-title">{{ block.title }}</h3>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" v-for="item in block.app" :key="item.label">
          <router-link :to="item.to" class="hui-marketing-block">
            <h-icon :icon="item.icon" :color="item.iconColor" size="48px" border-radius="50%" length="72px" class="hui-marketing-block__icon"></h-icon>
            <div class="hui-font-size-large hui-font-weight-primary hui-color-text-regular hui-mt-10px">{{ item.label }}</div>
            <div class="hui-font-size-small hui-mt-10px hui-color-text-secondary">{{ item.desc }}</div>
          </router-link>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script>
export default {
  data () {
    return {
      marketing: [
        {
          title: '到店前营销',
          app: [
            {
              label: '搞互动: 抢券活动',
              icon: 'icon-ticket',
              iconColor: '#409EFF',
              desc: '通过微信群发，抢优惠，吸引老客到店',
              to: '/home/marketing/snatch'
            },
            {
              label: '会员日: 周期性营销',
              icon: 'icon-calendar',
              iconColor: '#409EFF',
              desc: '每月或每周固定日期送券 / 红包',
              to: '/home/marketing/periodicity'
            },
            {
              label: '讲情怀: 纪念日营销',
              icon: 'icon-walletmembership',
              iconColor: '#409EFF',
              desc: '顾客首次消费一定时间后, 给顾客一个惊喜',
              to: '/home/marketing/mark'
            },
            {
              label: '防流失: 沉睡唤醒营销',
              icon: 'icon-alarm',
              iconColor: '#409EFF',
              desc: '会员久未消费，送券 / 红包，刺激吸引到店',
              to: '/home/marketing/awaken'
            },
            {
              label: '送福利: 生日营销',
              icon: 'icon-cakevariant',
              iconColor: '#409EFF',
              desc: '会员生日前14天，送券 / 红包',
              to: '/home/marketing/birthday'
            }
          ]
        },
        {
          title: '店内营销',
          app: [
            {
              label: '微信加粉: 关注营销',
              icon: 'icon-weixin',
              iconColor: '#ff9da3',
              desc: '关注微信公众号送福利',
              to: '/home/marketing/subscribe'
            },
            {
              label: '排队留客: 等位营销',
              icon: 'icon-bookmarkcheck',
              iconColor: '#ff9da3',
              desc: '等位就是等钱，降低排队流失率',
              to: '/home/marketing/queue'
            },
            {
              label: '消费引导: 进店有礼',
              icon: 'icon-gift',
              iconColor: '#ff9da3',
              desc: '给进店客户送上专属优惠礼包',
              to: '/home/marketing/giftbag'
            },
            {
              label: '提升桌均: 消费满减',
              icon: 'icon-autofix',
              iconColor: '#ff9da3',
              desc: '满足指定消费金额享优惠，提升桌均',
              to: '/home/marketing/rebate'
            }
          ]
        },
        {
          title: '离店后营销',
          app: [
            {
              label: '回头: 支付有礼',
              icon: 'icon-tagmultiple',
              iconColor: '#7ea7e3',
              desc: '付款后送优惠券，引导下次回店',
              to: '/home/marketing/paidpromotion'
            },
            {
              label: '裂变: 评价营销',
              icon: 'icon-thumbup',
              iconColor: '#7ea7e3',
              desc: '餐后评价，喊朋友一起来领券',
              to: '/home/marketing/fission'
            },
            {
              label: '奖励: 熟客激励营销',
              icon: 'icon-seal',
              iconColor: '#7ea7e3',
              desc: '餐后评价，喊朋友一起来领券',
              to: '/home/marketing/more'
            }
          ]
        },
        {
          title: '基础营销工具',
          app: [
            {
              label: '优惠券',
              icon: 'icon-weixin-kabao',
              iconColor: '#409EFF',
              desc: '最受消费者喜欢的促销功能，发起来！',
              to: '/home/marketing/coupon'
            },
            {
              label: '红包',
              icon: 'icon-email',
              iconColor: '#409EFF',
              desc: '除了固定面额外，还能拼手气哦！',
              to: '/home/marketing/lucky'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="less">
  @import '../../../../common/h-theme/_variable.less';
  .hui-marketing-title {
    border-left: 4px solid @--color-primary-light-7;
    padding-left: 12px;
    color: @--color-text-regular;
  }

  .hui-marketing-desc {
    padding-left: 16px;
    color: @--color-text-secondary;
    font-size: @--font-size-base;
  }

  .hui-marketing-block {
    position: relative;
    display: block;
    bottom: 0;
    padding: 48px 15px;
    margin-bottom: 20px;
    text-align: center;
    color: @--color-text-primary;
    border-radius: @--border-radius-base;
    border: 1px solid @--border-color-extra-light;
    transition: @--all-transition;

    &:hover {
      bottom: 6px;
      box-shadow: @--box-shadow-light;
    }
  }

  .hui-marketing-block__icon {
    background-color: @--background-color-base;
  }
</style>
